<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-商品列表</title>
	<link rel="stylesheet" type="text/css" href="/css/reset.css">
	<link rel="stylesheet" type="text/css" href="/css/main.css">
	<link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
</head>
<body>
	<div class="header_con">
		<div th:replace="header::top1"></div>
	</div>

	<div th:replace="search::top2"></div>

	<div class="navbar_con">
		<div class="navbar clearfix">
			<div class="subnav_con fl">
				<h1>全部商品分类</h1>	
				<span></span>			
				<ul class="subnav">
					<li><a href="/page/product/list?id=100001" class="fruit">新鲜水果</a></li>
					<li><a href="/page/product/list?id=100002" class="seafood">海鲜水产</a></li>
					<li><a href="/page/product/list?id=100003" class="meet">猪牛羊肉</a></li>
					<li><a href="/page/product/list?id=100004" class="egg">禽类蛋品</a></li>
					<li><a href="/page/product/list?id=100005" class="vegetables">新鲜蔬菜</a></li>
					<li><a href="/page/product/list?id=100006" class="ice">速冻食品</a></li>
				</ul>
			</div>
			<ul class="navlist fl">
				<li><a href="/">首页</a></li>
				<li class="interval">|</li>
				<li><a href="">手机生鲜</a></li>
				<li class="interval">|</li>
				<li><a href="">抽奖</a></li>
			</ul>
		</div>
	</div>

	<div class="breadcrumb">
		<a href="#">全部分类</a>
		<span>></span>
		<a href="#">新鲜水果</a>
	</div>

	<div class="main_wrap clearfix">
		<div class="l_wrap fl clearfix">
			<div class="new_goods">
				<h3>新品推荐</h3>
				<ul>
					<li>
						<a href="#"><img src="/images/goods/goods001.jpg"></a>
						<h4><a href="#">进口柠檬</a></h4>
						<div class="prize">￥3.90</div>
					</li>
					<li>
						<a href="#"><img src="/images/goods/goods002.jpg"></a>
						<h4><a href="#">玫瑰香葡萄</a></h4>
						<div class="prize">￥16.80</div>
					</li>
				</ul>
			</div>
		</div>

		<div class="r_wrap fr clearfix">
			<div class="sort_bar">
				<a href="#" class="active">默认</a>
				<a href="#">价格</a>
				<a href="#">人气</a>
			</div>

			<ul id="productList" class="goods_type_list clearfix">

				<!--<li>
					<a href="detail.html"><img src="/images/goods/goods003.jpg"></a>
					<h4><a href="/page/product/detail">大兴大棚草莓</a></h4>
					<div class="operate">
						<span class="prize">￥16.80</span>
						<span class="unit">16.80/500g</span>
						<a href="/page/cart/list" class="add_goods" title="加入购物车"></a>
					</div>
				</li>-->

			</ul>

			<!--<div class="pagenation">
				<a href="#">上一页</a>
				<a href="#" class="active">1</a>
				<a href="#">2</a>
				<a href="#">3</a>
				<a href="#">4</a>
				<a href="#">5</a>
				<a href="#">下一页></a>
			</div>-->
			<div class="pagenation" id="laypage"></div>
			<!--<div style="text-align: center" id="laypage"></div>-->
		</div>

	</div>


	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>

	<script src="/jquery-2.1.4.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/mylayer.js"></script>

	<script>
		layui.use(['laypage'],function () {
			var laypage = layui.laypage;

			var queryString = window.location.search;
			var urlParams = new URLSearchParams(queryString);
			var id = urlParams.get("id");

			var page = 1;
			var limit = 5;
			var isFirst = true;
			loadData();

			function loadData() {
				$.post(
					'/product/list',
					{'page':page,'limit':limit,'categoryId':id},
					function (result) {
						console.log(result);
						if (result.code == 0){
							if (isFirst){
								isFirst = false;
								laypage.render({
									elem:'laypage',
									count:result.count,
									limit:limit,
									limits:[5,10,15],
									layout:['count','prev','page','next','limit','limits','refresh'],
									jump:function (obj, first) {//模拟渲染
										//obj包含了当前分页的所有参数,比如：
										console.log(obj.curr);//得到当前页，以便向服务端请求对应页的数据
										console.log(obj.limit);//得到每页显示的条数
										page=obj.curr;//改变当前页码
										limit=obj.limit;
										//首次不执行
										if (!first){
											loadData();//加载数据
										}
									}
								});
							}

							$('#productList').empty();
							$(result.data).each(function () {
								var html = '';
								html += '<li>'
								html += '	<a href="/page/product/detail?id='+this.id+'"><img src="/pic/'+this.mainImage+'"></a>'
								html += '	<h4><a href="/page/product/detail?id='+this.id+'">'+this.name+'</a></h4>'
								html += '	<div class="operate">'
								html += '		<span class="prize">'+this.price+'</span>'
								html += '		<span class="subtitle">'+this.subtitle+'</span>'
								html += '		<a href="/page/cart/list" class="add_goods" title="加入购物车"></a>'
								html += '	</div>'
								html += '</li>'

								$('#productList').append(html);
							})
						}
					},
					'json'
				);
			}

			/*$.post(
				'/category/listAll',
				function (result) {
					console.log(result);
					if (result.code == 0) {

						var html = '';
						html+='<li class="nav-category">'
						html+='    <a href="#" id="header-title" class="header-title">全部商品分类</a>'
						html+='    <div class="site-category">'
						html+='        <ul id="categoryList" class="cat-ul">'
						$(result.data).each(function () {
							html+='<li class="category-list">'
							html+='    <a href="#" class="cat-title">'
							html+='        '+this.name+''
							html+='        <em class="cat-icon iconfont">&#xe638;</em>'
							html+='    </a>'
							html+='    <div class="commodity clearfix comm-3">'
							html+='        <ul class="com-ul">'
							$(this.childList).each(function () {
								html+='            <li class="com-li">'
								html+='                <a href="/page/product/list?id='+this.id+'" class="link clearfix">'
								html+='                    <img src="/pic/'+this.mianImage+'" alt="" width="40" height="40">'
								html+='                        <span class="text">'+this.name+'</span>'
								html+='                </a>'
								html+='            </li>'
							})
							html+='        </ul>'
							html+='    </div>'
							html+='</li>'

							//$('#categoryList').append(html);
						});
						html+='             </ul>'
						html+='         </div>'
						html+='     </li>'
						$('.nav-list').prepend(html);

					}
				},
				'json'
			)*/


		});


	</script>


</body>
</html>